
<template>
  <div class="container">
    <div class="box-bg"></div>
    <div class="box">
      <p class="statistics-time">统计时间:<span>2018年01月-02月</span></p>
      <div class="order-num">
        <div class="order-item">
          <p>20</p>
          <span>已完成(单)</span>
        </div>
        <div class="order-item">
          <p>20</p>
          <span>已完成(单)</span>
        </div>
        <div class="order-item">
          <p>20</p>
          <span>已完成(单)</span>
        </div>
      </div>
    </div>
    <div class="order-box">
      <div class="order-info">
          <div class="order-tit">
            <p>订单编号：<span>20181015112350</span></p>
            <p><span class="time-icon"></span><span>5分钟</span>前</p>
          </div>
        <div class="orderInfo">

          <div class="order-way-line">
            <div class="order-start-line">
              <span class="order-icon start"></span><span class="order-txt start-text">始</span><span class="order-dress">海洋大厦</span>
            </div>
            <div class="order-end-line">
              <span class="order-icon end"></span><span class="order-txt end-text">终</span><span class="order-dress">汉城湖南门</span>
            </div>
          </div>

          <div class="order-money">
            <span class="order-price">60.00</span>元
          </div>

          <div class="order-bot-btn"></div>

        </div>
      </div>
    </div>
    <tab-bar :selectNavIndex="selectNavIndex"></tab-bar>
  </div>
</template>

<script>
import tabBar from '../../../components/tabBar'
export default {
  components: {
    tabBar
  },
  data () {
    return {
      selectNavIndex: 0
    }
  },
  onLoad () {
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#192231',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  }
}
</script>

<style>
  .box-bg{
    height: 112rpx;
    width: 100%;
    background-color: #192231;
  }
  .box{
    width: 690rpx;
    height: 238rpx;
    margin: -54rpx auto 0 auto;
    background-color: #fff;
    border-radius: 20rpx;
  }
  .statistics-time{
    font-size: 24rpx;
    padding: 25rpx 0 0 36rpx;
  }
  .statistics-time span{
    padding-left: 30rpx;
  }
  .order-num{
    height: 186rpx;
    box-shadow: 0rpx 5rpx 8rpx #eee;
    border-bottom-left-radius: 25rpx;
    border-bottom-right-radius: 25rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;
    text-align: center;
  }
  .order-item p {
    font-size: 42rpx;
    font-weight: bold;
    color: #ed493f;
  }
  .order-item span{
    font-size: 24rpx;
  }
  .order-box{
    height: 785rpx;
  }
  .order-info{
    width: 690rpx;
    height: 230rpx;
    padding: 0 18rpx;
    margin: 30rpx auto 0 auto;
    box-shadow: 0rpx 5rpx 8rpx #eee;
    border-radius: 25rpx;
    border: 1rpx solid #f6f6f7;
  }
  .order-tit{
    display: flex;
    justify-content: space-between;
    font-size: 22rpx;
    line-height: 60rpx;
  }
  .time-icon{
    display: inline-block;
    width: 10rpx;
    height: 10rpx;
    background-color: #13bf6c;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 15rpx;
  }
  .orderInfo{
    width: 650rpx;
    margin: 38rpx auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 95rpx;
  }
.order-way-line{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.order-way-line>div{
  display: flex;
  align-items: center;
}
.order-icon{
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #fff;
}
  .start{
    border: 4rpx solid #13bf6c;
  }
  .end{
    border: 4rpx solid #ed493d;
  }
  .start-text{
    color: #13bf6c;
  }
  .order-txt{
    font-size: 24rpx;
    padding: 0 35rpx 0 18rpx;
  }
  .end-text{
    color: #ed493d;
  }
  .order-dress{
    font-size: 28rpx;
    flex: 1;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .order-money{
    font-size: 20rpx;
  }
  .order-price{
    font-size: 30rpx;
    color: #ed493d;
    font-weight: bold;
  }
  .order-bot-btn{
    width: 77rpx;
    height: 77rpx;
    background: url("~static/img/rob.png") no-repeat center/cover;
  }
</style>
